<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel='stylesheet' type='text/css' href='../public/stylesheets/style.css' />
    <style>
        .show {
            margin-top: 40px;
            font-size: larger;
            font-weight: bolder;
            text-align: center;
            line-height: 50px;
            background: orange;
        }

        .show:hover {
            cursor: pointer;
        }

        .choose {
            background: yellow;
        }

        #nav {
            display: flex;
            flex-direction: column;
            width: 10%;
            border-right: 2px solid #aaa;
            padding-bottom: 40px;
        }

        .title {
            width: 100%;
            line-height: 50px;
            border-bottom: 2px solid #aaa;
            text-align: center;
        }

        .box {
            display: flex;
            flex-direction: row;
            min-width: 1000px;
        }

        .container {
            width: 1200px;
            background: rgb(154, 36, 97);
            margin: 0 auto;
        }

        #content {
            font-size: 16px;
            width: 90%;
        }

        table {
            border-collapse: collapse;
            width: 96%;
            margin: 2% 2%;
            table-layout: fixed;
        }

        tr {
            width: 100%;
        }

        tr th {
            font-size: larger;
            font-weight: bolder;
        }

        tr td {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            word-wrap: break-word;
            text-align: center;
            color: aqua;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="title">
            <h1>数据库管理系统</h1>
        </div>
        <div class="box">
            <!-- 添加表时，只需在nav中加入div即可，注意：id与表名相同 -->
            <div id="nav">
                <div class="show" id="user">user</div>
                <div class="show" id="review">review</div>
                <div class="show" id="reviewdc">reviewdc</div>
                <div class="show" id="sgroup">sgroup</div>
                <div class="show" id="target">target</div>
            </div>
            <div id="content">
            </div>
        </div>
    </div>
</body>
<script type='text/javascript'>
    let nav = document.getElementById('nav');
    let show = document.getElementsByClassName('show');
    let content = document.getElementById('content');
    let tables = document.getElementsByTagName('table');

    // 表点击事件
    nav.onclick = function (e) {
        console.log(e.target.id);
        // 修改导航栏样式
        let showList = [...show];
        showList.forEach(item => {
            if (item.id == e.target.id) {
                item.setAttribute('class', 'show choose');
            } else {
                item.setAttribute('class', 'show');
            }
        });
        // 发起网络请求
        let route = 'http://localhost:3000/behind/' + e.target.id;
        console.log(route);
        fetch(route)//请求数据库中图片信息
            .then(res => res.json())
            .then(res => {
                console.log(res);
                render(res.List, e.target.id + 'table');
            })
        // 表的显示与隐藏
        let tableList = [...tables];
        tableList.forEach(table => {
            if (table.id.indexOf(e.target.id) == -1) {
                content.removeChild(table);
            }
        })
    }

    // 表结构渲染
    function render(List, id) {
        console.log(List);
        if (List.length == 0) {
            content.innerHTML = '该表目前没有数据'
        } else {
            let keys = Object.keys(List[0]);
            console.log(keys);
            // 表的样式
            let table = document.createElement('table');
            table.setAttribute('border', '1');
            table.setAttribute('id', id);
            // 插入表头
            let thead = document.createElement('thead');
            let header = document.createElement('tr');
            // header.setAttribute('class', 'header');
            keys.forEach(key => {
                let th = document.createElement('th');
                th.innerHTML = key;
                header.appendChild(th);
            })
            thead.appendChild(header);
            table.appendChild(thead);
            // 插入表的内容
            let tbody = document.createElement('tbody');
            List.forEach(item => {
                let tBody = document.createElement('tr');
                for (key in item) {
                    let td = document.createElement('td');
                    td.innerHTML = item[key];
                    tBody.appendChild(td);
                }
                tbody.appendChild(tBody);
            })
            table.appendChild(tbody);
            content.appendChild(table);
        }

    }
</script>

</html>